<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!-- 响应式布局 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link href="layui/css/layui.css" rel="stylesheet" />
    </head>
    <body>
        <div class="layui-container" style="margin-top: 10px;">
            <div class="layui-row">
                
                <!-- table -->
                <form class="layui-form" action="">
                    <!-- 隐藏图书id -->
                    <input type="hidden" name="bookId" id="bookId" />
                    <div class="layui-form-item">
                        <label class="layui-form-label">图书名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="bookName" id="bookName" lay-verify="required" placeholder="图书名称..."
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图书作者</label>
                        <div class="layui-input-block">
                            <input type="text" name="authorName" id="authorName" lay-verify="required"
                                placeholder="图书作者..." autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">图书价格</label>
                            <div class="layui-input-inline" style="width: 200px;">
                                <input type="number" name="price" id="price" placeholder="" autocomplete="off"
                                    class="layui-input" min="0" step="1" lay-affix="number">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图片</label>
                        <div class="layui-inline">
                            <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>点击上传，或将文件拖拽到此处</div>
                                <div id="ID-upload-demo-preview">
                                    <hr> <img src="" id="picUrl" style="max-width: 100%">
                                </div>
                            </div>
                            <input type="hidden" name="bookAddress" id="bookAddress" />
                            <input type="hidden" name="bookUrl" id="bookUrl" />
                            <!-- <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                              <i class="layui-icon layui-icon-upload"></i> 上传
                            </button>
                            <div style="width: 200px;">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="ID-upload-demo-img"
                                        style="width: 100%; height: 92px;">
                                    <div id="ID-upload-demo-text"></div>
                                </div>
                                <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                                    lay-filter="filter-demo">
                                    <div class="layui-progress-bar" lay-percent=""></div>
                                </div>
                            </div> -->
                        </div>

                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">图书分类</label>
                        <div class="layui-input-block">
                            <select name="categoryId" id="categoryId" lay-filter="categoryType"></select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <input type="hidden" id="currentState" />
                        <label class="layui-form-label">是否上架</label>
                        <div class="layui-input-block" id="status">

                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="createTime" id="createTime"
                                placeholder="yyyy/MM/dd HH:mm:ss">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit lay-filter="edit">更新图书</button>
                            <!-- <button type="reset" class="layui-btn layui-btn-primary">取消</button> -->
                        </div>
                    </div>

                </form>
            </div>
        </div>

        <script src="layui/layui.js"></script>
        <script>
            layui.use(function() {
                laydate = layui.laydate
                form = layui.form
                upload = layui.upload
                let $ = layui.$

                let url = new URL(location.href);
                let params = new URLSearchParams(url.search);
                // 获取特定参数的值
                let categoryId = params.get('categoryId'); // 返回'10002'
                let currentState = params.get('currentState'); // 返回'1'

                // console.log('Category ID:', categoryId);
                // console.log('Current State:', currentState);

                form.on('submit(edit)', function(data) {
                    let field = data.field
                    console.log(JSON.stringify(field))
                    $.ajax({
                        type: 'post',
                        url: 'http://192.168.142.128:8080/updateBook',
                        data: JSON.stringify(field),
                        contentType: "application/json",
                        dataType: "json",
                        success: function(rsp) {
                            if (rsp.code == 0) {
                                let index = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(index);
                            } else {
                                layer.msg(rsp.msg)
                            }
                        }
                    })
                    //阻止表单默认提交
                    return false;
                });


                //显示封面
                upload.render({
                    elem: '#ID-upload-demo-drag',
                    url: 'http://192.168.142.128:8080/uploadFile', // 实际使用时改成您自己的上传接口即可。
                    done: function(res) {
                        //console.log(res)
                        //将图片服务器地址和本机真实地址设置到对应隐藏域
                        $('#bookAddress').val(res.data.bookAddress)
                        $('#bookUrl').val(res.data.bookUrl)
                        $('#ID-upload-demo-preview')
                            .find('img').attr('src', 'http://192.168.142.128:8080/' + res.data
                                .bookUrl);

                    }
                });

                //获取category
                $.getJSON("http://192.168.142.128:8080/getCategoryList", function(rsp) {
                    if (rsp.code === 0) {
                        let list = rsp.data
                        let s = '<option value=""></option>'
                                
                        /*//methed 1
                        // for (let i = 0; i < list.length; ++i) {
                        //     if (categoryId == list[i].categoryId) {
                        //         s += ' <option value="' + list[i].categoryId + '" selected >' + list[i]
                        //             .categoryName + '</option>'

                        //     } else {
                        //         s += ' <option value="' + list[i].categoryId + '">' + list[i]
                        //             .categoryName + '</option>'

                        //     }
                        // }
                        //*/
                        
                        //methd2
                        for (let i = 0; i < list.length; ++i) {
                            s += ' <option value="' + list[i].categoryId + '">' + list[i].categoryName + '</option>'
                        }
                        $('#categoryId').html(s)
                        //methd2
                        //$('select[name="categoryId"] option[value="'+categoryId+'"]').prop('selected', true);
                        $(`select[name="categoryId"] option[value="${categoryId}"]`).prop('selected', true);
                        //重新渲染界面所有的 select
                        form.render('select')
                    } else {

                    }
                })
                //单选框回显
                //method1
                // let str = ''
                // if (currentState == 1) {
                //     str += '<input type="radio" name="status" value="1" title="上架" checked>';
                //     str += '<input type="radio" name="status" value="0" title="下架">'
                // } else {
                //     str += '<input type="radio" name="status" value="1" title="上架">';
                //     str += '<input type="radio" name="status" value="0" title="下架" checked>'
                // }
                // $('#status').html(str)
                // form.render('radio')

                //methon2
                let str = ''
                str += '<input type="radio" name="status" value="1" title="上架">';
                str += '<input type="radio" name="status" value="0" title="下架">'
                $('#status').html(str)
                $(`input[name="status"][value="${currentState}"]`).prop('checked', true);
                form.render('radio')
                //生成时间控件
                laydate.render({
                    elem: '#createTime',
                    type: 'datetime',
                    format: 'yyyy/MM/dd HH:mm:ss'
                    // value: new Date()
                });
            })
        </script>
    </body>
</html>